﻿@{
    ViewBag.Title = "Gestion mensuelle";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Gestion mensuelle</h2>

<div id="timelineYear">
    @*Time line year content*@
</div>
<div id="timelineMonth" class="customTimeLineMargin">
    @*Time line Month content*@
</div>
<link type="text/css" rel="stylesheet" href="@Url.Content("~/content/TableHelper.css")" />
<div id="containedPage"></div>


<script type="text/javascript">

    function AjaxCallPage(pageUrl) {
        var frm = $("#partialForm").serialize();
        $.ajax({
            url: pageUrl,
            cache: false,
            async: true,
            type: "Get",
            data: frm, //data to post to server
            error: function (html) { console.log(html); }, //something goes wrong...
            success: function (data) {
                $("#containedPage").html(data); //replace our form content
            }
        });
    }

    $(document).ready(function () {

        $('#timelineYear').timeline({
            name: "year", 
            onselect: function (id) {
                //console.log($('#yearinner>.selected').html());
                $('#yearinner>.selected').removeClass('selected');
                $('#' + id).addClass('selected');
                $('#timelineMonth').css('visibility', 'visible');
            },
            onunselect: function (id) {
                $('.selected').removeClass('selected');
                $('#timelineMonth').css('visibility', 'hidden');
                $('#content').remove();
            }
        });

        $('#timelineMonth').timeline({
            type: "month",
            name: "month",
            onselect: function (id) {
                $('#monthinner>.selected').removeClass('selected');
                $('#' + id).addClass('selected');
                AjaxCallPage('@(Url.Action("PartialShowExpenses", "MonthlyManagement"))');
            },
            onunselect: function (id) {
                $('#monthinner>.selected').removeClass('selected');
                $('#content').remove();
            }
        });
    });
</script>